<template>
  <div style="">
    <div v-for="item, index in data" :key="index">
      <template v-if="!item.children">
        <div style="display: flex;align-items: center;white-space:nowrap;">
          <div class="ed-gx">
            <div class="ed-heng" v-if="index == 0"></div>
            <div class="ed-style" :style="getStyle(data, item.id, index)" v-if="index != 0"></div>
            <el-select size="mini" v-if="index != 0" v-model="item.symbol" placeholder="选">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="ed-tj">
            <el-select size="mini" v-model="item.col" placeholder="指标值" @change="colChange($event, item)">
              <el-option v-for="col in cols" :key="col.dimensionName" :label="col.dimensionName"
                :value="col.dimensionName">
              </el-option>
            </el-select>
          </div>
          <div class="ed-cz">
            <i class="ed-set-btn el-icon-plus" @click="addTJ(data, index)" title="向下添加条件"></i>
            <i class="ed-set-btn el-icon-top" @click="upTJ(data, index)" title="上移"></i>
            <i class="ed-set-btn el-icon-bottom" @click="downTJ(data, index)" title="下移"></i>
            <i class="ed-set-btn el-icon-c-scale-to-original" @click="addKH(data, index)" title="向下添加括号"></i>
            <i class="ed-set-btn el-icon-delete" @click="delTJ(data, index)" title="删除"></i>
          </div>
        </div>
      </template>
      <template v-if="item.children">
        <div class="ed-g">
          <div class="ed-gx">
            <div class="ed-heng" v-if="index == 0"></div>
            <div class="ed-style" :style="getGroupStyle(data, item.id, item.children, index)" v-if="index != 0"></div>
            <el-select size="mini" v-if="index != 0" v-model="item.symbol" placeholder="选">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="ed-group">
            <p style="height: 28px;line-height: 28px;margin: 0;">(</p>
            <drawModel :cols="cols" :data="item.children"></drawModel>
            <div style="height: 28px;line-height: 28px;margin: 0;">)
              <div class="ed-group-cz">
                <i class="ed-set-btn el-icon-plus" @click="addTJ(data, index)" title="向下添加条件"></i>
                <i class="ed-set-btn el-icon-top" @click="upTJ(data, index)" title="上移"></i>
                <i class="ed-set-btn el-icon-bottom" @click="downTJ(data, index)" title="下移"></i>
                <i class="ed-set-btn el-icon-c-scale-to-original" @click="addKH(data, index)" title="向下添加括号"></i>
                <i class="ed-set-btn el-icon-delete" @click="delKH(data, index)" title="删除括号"></i>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { v4 as uuidv4 } from 'uuid';
export default {
  name: 'drawModel',

  props: ['cols', 'data'],

  data() {
    return {
      options: [{
        label: '加',
        value: '+'
      }, {
        label: '减',
        value: '-'
      }, {
        label: '乘',
        value: '*'
      }, {
        label: '除',
        value: '/'
      }]
    }
  },
  mounted() {

  },
  methods: {
    // 添加条件
    addTJ(data, index) {
      data.splice(index + 1, 0, {
        id: uuidv4(),
        symbol: '',
        col: '',
      })
    },

    // 添加括号
    addKH(data, index) {
      data.splice(index + 1, 0, {
        id: uuidv4(),
        symbol: '',
        children: [{
          id: uuidv4(),
          symbol: '',
          col: '',
        }]
      })
    },

    // 删除条件
    delTJ(data, index) {
      if (data.length === 1) {
        this.$message.warning('只剩一条了！')
        return
      }
      if (index === 0) {
        data[1].symbol = ''
      }
      data.splice(index, 1)
    },

    // 删除括号
    delKH(data, index) {
      let tempCom = data.splice(index, 1)
      tempCom[0].children.forEach((item, i) => {
        if (i === 0) {
          item.symbol = tempCom[0].symbol
        }
        data.splice(index + i, 0, item)
      })
    },

    // 条件上移
    upTJ(data, index) {
      if (index > 1) {
        let tempCom = data.splice(index, 1)
        data.splice(index - 1, 0, tempCom[0])
      }
      if (index === 1) {
        let tempCom = data.splice(index, 1)
        data[0].symbol = tempCom[0].symbol
        tempCom[0].symbol = ''
        data.splice(index - 1, 0, tempCom[0])
      }
    },

    // 条件下移
    downTJ(data, index) {
      if (data.length < 2) {
        return
      }
      if (index !== data.length - 1 && index !== 0) {
        let tempCom = data.splice(index, 1)
        data.splice(index + 1, 0, tempCom[0])
      }
      if (index === 0) {
        data[0].symbol = data[1].symbol
        data[1].symbol = ''
        let tempCom = data.splice(index, 1)
        data.splice(index + 1, 0, tempCom[0])
      }
    },

    getStyle(data, id, index) {
      let len = data.length
      let w = (48 / len) * index
      let h = this.getHeight(data, id) + 14
      return {
        'border-color': '#e7e7e7',
        'border-left-width': '1px',
        'border-bottom-width': '1px',
        'position': 'absolute',
        'width': w + '%',
        'height': h + 'px',
        'left': (50 - w) + '%',
        'top': -h + 14 + 'px'
      }
    },

    getGroupStyle(data, id, children, index) {
      let len = data.length
      let w = (48 / len) * index
      let h = this.getHeight(data, id, children)
      return {
        'border-color': '#e7e7e7',
        'border-left-width': '1px',
        'border-bottom-width': '1px',
        'position': 'absolute',
        'width': w + '%',
        'height': h + 'px',
        'left': (50 - w) + '%',
        'top': - h + 14 + 'px'
      }
    },

    getHeight(data, id, children) {
      let index = data.findIndex(item => { return item.id === id })
      let zoom = this.getZoom(data.slice(0, index))
      let h = 0
      if (children) {
        let zzoom = this.getZoom(children) + 2
        h = (zzoom * 28 / 2) + (zoom * 28) - 14
      } else {
        h = (zoom * 28) - 14
      }
      return h
    },

    getZoom(data) {
      let num = 0
      data.forEach(item => {
        if (item.children) {
          num += 2
          num += this.getZoom(item.children)
        } else {
          num++
        }
      });
      return num
    },

    colChange(val, item) {
      let obj = this.cols.find(col => {
        return col.dimensionName === val
      })
      if (obj) {
        item.type = obj.dataType
      }
    },






  },
}
</script>

<style scoped>
.ed-g {
  display: flex;
  align-items: center;
}

.ed-gx {
  display: inline-block;
  vertical-align: middle;
  text-align: right;
  min-width: 100px;
  position: relative;
}

.ed-gx>>>.el-select--mini {
  width: 50px;
}

.ed-gx>>>.el-input__inner,
.ed-tj>>>.el-input__inner {
  border-radius: 0px;
  padding: 0 5px;
}

.ed-tj {
  padding-left: 5px;
  display: inline-block;
}

.ed-tj>>>.el-select--mini {
  width: 100px;
}

.ed-tj .el-input {
  width: 130px;
}

.ed-cz {
  padding-left: 5px;
  display: inline-block;
}

.ed-set-btn {
  margin-left: 5px;
}

.ed-set-btn:hover {
  cursor: pointer;
  color: #35b6f2;
}

.ed-group {
  display: inline-block;
}

.ed-group-cz {
  display: inline-block;
  height: 28px;
  align-items: center;
  padding-left: 10px;
}

.ed-g:after {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.ed-heng {
  position: absolute;
  top: 0px;
  left: 5%;
  border: 1px solid #e7e7e7;
  width: 90%;
}

.ed-style {
  border-width: 0px;
  border-style: solid;
}
</style>